<template>
    <div>
        <h1>人员列表 遍历数组</h1>
        <ul>
            <li v-for="(person, index) in persons" :key="index"> {{ person.id }} 号 {{ person.name }} 今年 {{ person.age }} 岁
            </li>
        </ul>

        <button @click="orderByAge">按年龄{{ ageAsc ? '升' : '降' }}排序</button>

        <button @click="updateArr">更新数组</button>


        <h1>工作 遍历对象</h1>
        <ul>
            <li v-for="(v, k) in wordkers" :key="k"> {{ k.toLocaleUpperCase() }} -- {{ v }} </li>
        </ul>

    </div>
</template>

<script>
export default {
    name: 'HelloFor',
    data() {
        return {
            ageAsc: true,
            persons: [
                { id: 3, name: '张三', age: 23 },
                { id: 1, name: '劣势', age: 28 },
                { id: 2, name: '王五', age: 18 }
            ],
            wordkers: {
                title: '快递员',
                sales: "12万($)/月",
            }

        }
    },
    methods: {
        orderByAge() {
            this.persons.sort((a, b) => {
                return this.ageAsc ? a.age - b.age : b.age - a.age;
            })
            this.ageAsc = !this.ageAsc;
        },
        updateArr() {
            //bug 不起作用的这样 
            //this.persons[0] = { id: 3, name: '张3', age: 24 };
            this.persons.splice(0, 1, { id: 3, name: '张3', age: 24 })



            //this.persons[0].age++;
        }
    }
}
</script>

<style scoped>
button {
    margin-left: 30px;
}
</style>
